<template>
    <div style="position: relative;">
        <van-popup v-model:show="showRight" position="right" @close="closePopup" :style="{ width: '75%', height: '100%' }">
            <div class="filter-popup">
                <!-- 所属组织 -->
                <div class="filter-section">
                    <div class="section-header">
                        <div class="section-title">所属组织</div>
                        <div class="section-actions">
                            <span class="reset-btn" @click="resetOrg">重置</span>
                            <span class="switch-label">只查本级</span>
                            <van-switch v-model="orgOnlyCurrentLevel" size="15px" />
                        </div>
                    </div>
                    <div class="tags-wrapper">
                        <div 
                            v-for="(tag, index) in selectedOrgTags" 
                            :key="index"
                            class="selected-tag"
                        >
                            {{ tag.text || tag.orgName || tag }}
                        </div>
                        <div class="more-btn" @click="goMore('org')">
                            更多
                        </div>
                    </div>
                </div>
  <div>
            <div style="display: flex; justify-content: center" class="btn">
                <div class="btnlist">
                    <div style="width: 50%; padding: 10px" :class="[type == 1 ? 'activeBtn' : '']" @click="closeBtn">重置</div>
                    <div style="width: 50%; padding: 10px" :class="[type == 2 ? 'activeBtn2' : '']" @click="submitBtn">确认</div>
                </div>
            </div>
        </div>
                <!-- 其他筛选条件保持不变 -->
                <!-- <div class="filter-section">...</div> -->
            </div>
        </van-popup>
    </div>
</template>

<script>
export default {
    name: 'vPopup',
    props: {},
    data() {
        return { 
            showRight: false,
            orgOnlyCurrentLevel: true,
            // 从 Vuex 获取选中的组织数据
            selectedOrg: [],
            type:1
        }
    },
    computed: {
        // 计算选中的组织标签显示
        selectedOrgTags() {
            if (this.selectedOrg && this.selectedOrg.length > 0) {
                return this.selectedOrg
            }
            // 如果没有选中任何组织，显示默认的组织名称（从 orgTree 根节点获取）
            const orgTree = this.$store.state.assectData.orgTree
            if (orgTree && orgTree.length > 0) {
                // 获取根节点的组织名称
                const rootOrg = orgTree[0]
                return [{ text: rootOrg.text || rootOrg.nodeName }]
            }
            return ['深圳分公司'] // 默认值
        }
    },
    methods: {
        closeBtn(){},
         submitBtn(){},
       open(){
        this.showRight = true
        this.loadSelectedOrgFromStore()
       },
       closePopup(e){
        this.$emit('close', e)
       },
       // 从 Vuex 加载已选的组织数据
       loadSelectedOrgFromStore() {
           try {
               const returnData = this.$store.state.assectData.returnData
               if (returnData && Array.isArray(returnData)) {
                   // 过滤出组织类型的数据
                   const orgData = returnData.filter(item => item.orgId)
                   if (orgData.length > 0) {
                       this.selectedOrg = orgData
                   }
               }
           } catch (e) {
               console.warn('从 Vuex 加载组织数据失败:', e)
           }
       },
       resetOrg() {
           this.selectedOrg = []
           // 同时清空 Vuex 中的组织选择数据
           try {
               const currentReturnData = this.$store.state.assectData.returnData || []
               const filteredData = currentReturnData.filter(item => !item.orgId)
               this.$store.commit('assectData/setReturnData', filteredData)
           } catch (e) {
               console.warn('重置组织数据失败:', e)
           }
       },
       resetProject() {
           this.selectedProject = []
       },
       resetRegion() {
           this.selectedRegion = []
       },
       resetAssetType() {
           this.selectedAssetType = []
       },
       goMore(type) {
           if (type === 'org') {
               // 跳转到组织选择页面，传递当前已选的组织用于回显
               const query = {}
               if (this.selectedOrg && this.selectedOrg.length > 0) {
                   query.preselect = JSON.stringify(this.selectedOrg)
               }
               
               this.$router.push({ 
                   name: 'assectType', 
                   params: { key: 'gldw' }, 
                   query: { ...query, returnName: this.$route.name || '' } 
               });
           } else if (type === 'assetType') {
               this.$router.push({ 
                   name: 'assectType', 
                   params: { key: 'zclx' }, 
                   query: { returnName: this.$route.name || '' } 
               });
           } else if (type === 'region') {
               this.$router.push({ name: 'assectLocation'});
           } else {
               console.log('打开更多选择:', type)
           }
       }
    },
    mounted() {
        // 初始化时加载组织数据
        this.loadSelectedOrgFromStore()
    }
}
</script>

<style scoped>
/* 样式保持不变 */
.filter-popup {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 20px 15px;
    overflow-y: auto;
}

.filter-section {
    margin-bottom: 25px;
}

.filter-section:last-child {
    margin-bottom: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.section-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.section-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.reset-btn {
    font-size: 14px;
    color: #3772ff;
    cursor: pointer;
}

.switch-label {
    font-size: 14px;
    color: #333;
    margin-right: 5px;
}

.tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.selected-tag {
    padding: 6px 15px;
    border: 1px solid #3772ff;
    border-radius: 15px;
    background-color: transparent;
    color: #3772ff;
    font-size: 14px;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.4;
}

.more-btn {
    padding: 6px 15px;
    border-radius: 15px;
    background-color: #f5f5f5;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

.more-btn:active {
    background-color: #e8e8e8;
}
.activeBtn {
    border-radius: 12.5px 0 17.5px 12.5px;
    background-color: #fff;
    color: #000;
}

.activeBtn2 {
    border-radius: 0px 12.5px 12.5px 12.5px;
    background-color: #fff;
    color: #000;
}

.btn {
    position: absolute;
    bottom: 100px;
    width: 70%;
    left: 15%;
}

.btnlist {
    display: flex;
    border: 1px solid #3772ff;
    background-color: #3772ff;
    border-radius: 12.5px;
    text-align: center;
    width: 305px;
    color: #fff;
}

/* .title {
    font-size: 1.2em;
} */
</style>